<template>
  <div class="song-list-album">
    <div class="album-slide">
      <div class="album-title">
        <p>{{ tempList.title }}</p>
      </div>
      <div class="album-score">
        <el-row :gutter="20" style="width: 30%">
          <el-col :span="12" style="text-align: center">
            <div>
              <h3>乐馆评分：</h3>
              <div>
                <el-rate v-model="average" disabled></el-rate>
              </div>
            </div>
            <span>{{ average * 2 }}</span>
          </el-col>
          <el-col :span="12" style="text-align: center">
            <div>
              <h3>评价：</h3>
              <div @click="setRank">
                <el-rate v-model="rank" allow-half show-text></el-rate>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20" style="width: 90%">
        <el-col :span="12" style="text-align: right">
          <div class="album-img">
            <img :src="attachImageUrl(tempList.pic)" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="album-info">
            <h2>简介：</h2>
            <span>
              {{ tempList.introduction }}
            </span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="album-content">
      <div class="songs-body">
        <album-content :songList="listOfSongs">
          <template slot="title">歌单</template>
        </album-content>
        <comment :playId="songListId" :type="1"></comment>
      </div>
    </div>
  </div>
</template>
<script>
import { mixin } from "../mixins";
import { mapGetters } from "vuex";
import {
  listSongDetail,
  songOfSongId,
  setRank,
  getRankOfSongListId,
} from "../api/index";
import AlbumContent from "../components/AlbumContent";
import Comment from "../components/Comment";

export default {
  name: "song-list-album",
  mixins: [mixin],
  components: {
    AlbumContent,
    Comment,
  },
  data() {
    return {
      songLists: [], //当前页面需要展示的乐馆列表
      songListId: "", //前面传来的乐馆id
      average: 0, //平均分
      rank: 0, //提交评价的分数
    };
  },
  computed: {
    ...mapGetters([
      "listOfSongs", //当前播放列表
      "tempList", //当前乐馆对象
      "loginIn", //用户是否已登录
      "userId", //当前登录用户id
    ]),
  },
  created() {
    this.songListId = this.$route.params.id;
    this.getSongId();
    this.getRank(this.songListId);
  },
  methods: {
    //获取当前乐馆的乐馆列表
    getSongId() {
      listSongDetail(this.songListId)
        .then((res) => {
          for (let item of res) {
            this.getSongList(item.songId);
          }
          this.$store.commit("setListOfSongs", this.songLists);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //根据乐馆id获取乐馆信息
    getSongList(id) {
      songOfSongId(id)
        .then((res) => {
          this.songLists.push(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取乐馆评分
    getRank(id) {
      getRankOfSongListId(id)
        .then((res) => {
          this.average = res / 2;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //提交评分
    setRank() {
      if (this.loginIn) {
        let params = new URLSearchParams();
        params.append("songListId", this.songListId);
        params.append("consumerId", this.userId);
        params.append("score", this.rank * 2);
        setRank(params)
          .then((res) => {
            if (res.code == 1) {
              this.notify("评分成功", "success");
              this.getRank(this.songListId);
            } else {
              this.notify("评分失败", "error");
            }
          })
          .catch((err) => {
            this.notify("您已经评价过啦", "error");
          });
      } else {
        this.rank = null;
        this.notify("请先登录", "warning");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/song-list-album.scss";
</style>
